<template>
  <el-pagination style="margin-top:10px"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="value.current"
      :page-sizes="[10,20,50,100, 500, 1000]"
      :page-size="value.pageSize"
      :layout="layout"
      :total="value.total">
    </el-pagination>
</template>

<script>
export default {
  name: 'pagination',
  props: {
    value: {
      type: Object,
      default: ()=>{}
    }
  },
  data() {
    return {
    }
  },

  computed:{
    layout(){
     return this.value && this.value.gadgetType && this.value.gadgetType === "tablegadget" ? 'prev, pager, next, jumper' : 'total, sizes, prev, pager, next, jumper'    
    }  
  },
  methods: { 
    handleSizeChange(e) {
      this.$emit('input',this._.merge(this.value,{pageSize:e,current:1}))
      this.$emit('query')
    },
    handleCurrentChange(e) {
      this.$emit('input',this._.merge(this.value,{current:e}))
      this.$emit('query')
    }
  }
}
</script>

<style lang="scss" scoped>
.el-pagination {
  text-align: right!important;
}
</style>
